<div class="data-table" #container>
    <div class="data-table-wrapper" #dataTable [ngStyle]="{'height':height}">
        <nz-tabset [nzSelectedIndex]="selectedIndex$ | async">
            <nz-tab *ngFor="let dataTable of (dataTables$ | async)">
                <ng-template #nzTabHeading>
                    <div class="tab-container">
                        <span title="{{dataTable.title}}">{{dataTable.title}}</span>
                        <i class="anticon anticon-cross" (click)="closeTab(dataTable)"></i>
                    </div>
                </ng-template>
                <div class="data-table-container">
                    <ege-data-table-content 
                    [tableData]="dataTable.queryResult || dataTable.data" 
                    [tableColumn]="dataTable.tableColumn"
                    [alias]="dataTable.alias"
                    [loading]="dataTable.loading"
                    [loaded]="dataTable.loaded"
                    [loadError]="dataTable.loadError"
                    (tableRowMouseover)="onTableRowMouseover($event, dataTable.id)" 
                    (tableRowMouseout)="onTableRowMouseout($event, dataTable.id)"></ege-data-table-content>
                </div>
            </nz-tab>
        </nz-tabset>
        <button class="collapse-button" [ngClass]="{
            'collapse-button-rise': isDown
        }" (click)="onCollapse()">
            <i class="anticon anticon-down" [ngClass]="{
                'anticon-down': !isDown,
                'anticon-up': isDown
            }"></i>
        </button>
    </div>
</div>